'use client';

import type { TMetadata } from '@/types';
import { NavbarPage } from '@/app/[locale]/navbar';
import FooterPage from '@/app/[locale]/footer';
import { useTranslations } from 'use-intl';

export default function TermsPage({ metadata }: { metadata: TMetadata }) {
  return (
    <>
      <NavbarPage metadata={metadata} />
      <Terms metadata={metadata} />
      <FooterPage metadata={metadata} />
    </>
  );
}

const Terms = ({ metadata }: { metadata: TMetadata }) => {
  const t = useTranslations('TermsPage');
  const env = metadata.env;

  return (
    <div className="card border-0">
      <div className="card-body">
        <p className="lead fw-bold text-center my-5">{t('serviceAgreement')}</p>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">一、{t('agreementScope')}</p>
          <ol>
            <li className="my-2">
              {t('agreementScopeList.li1', { appName: env.APP_NAME })}
            </li>
            <li className="my-2">{t('agreementScopeList.li2')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">二、{t('accountRegistration')}</p>
          <ol>
            <li className="my-2">{t('accountRegistrationList.li1')}</li>
            <li className="my-2">{t('accountRegistrationList.li2')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">三、{t('lawfulUse')}</p>
          <ol>
            <li className="my-2">{t('lawfulUseList.li1')}</li>
            <li className="my-2">{t('lawfulUseList.li2')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">四、{t('contentRules')}</p>
          <ol>
            <li className="my-2">{t('contentRulesList.li1')}</li>
            <li className="my-2">
              {t('contentRulesList.li2', { appName: env.APP_NAME })}
            </li>
            <li className="my-2">
              {t('contentRulesList.li3', { appName: env.APP_NAME })}
            </li>
            <li className="my-2">
              {t('contentRulesList.li4', { appName: env.APP_NAME })}
            </li>
            <li className="my-2">
              {t('contentRulesList.li5', { appName: env.APP_NAME })}
            </li>
            <li className="my-2">
              {t('contentRulesList.li6', { appName: env.APP_NAME })}
            </li>
            <li className="my-2">{t('contentRulesList.li7')}</li>
            <li className="my-2">
              {t('contentRulesList.li8', { appName: env.APP_NAME })}
            </li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">五、{t('informationSecurity')}</p>
          <ol>
            <li className="my-2">{t('informationSecurityList.li1')}</li>
            <li className="my-2">{t('informationSecurityList.li2')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">六、{t('intellectualProperty')}</p>
          <ol>
            <li>{t('intellectualPropertyList.li1')}</li>
            <li className="my-2">{t('intellectualPropertyList.li2')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">七、{t('forceMajeure')}</p>
          <ol>
            <li className="my-2">{t('forceMajeureList.li1')}</li>
            <li className="my-2">{t('forceMajeureList.li2')}</li>
            <li className="my-2">{t('forceMajeureList.li3')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">八、{t('serviceChanges')}</p>
          <ol>
            <li className="my-2">{t('serviceChangesList.li1')}</li>
            <li className="my-2">{t('serviceChangesList.li2')}</li>
          </ol>
        </div>

        <div className="ps-3 pe-2">
          <p className="my-3 fw-bold">九、{t('legalApplicability')}</p>
          <ol>
            <li className="my-2">{t('legalApplicabilityList.li1')}</li>
            <li className="my-2">{t('legalApplicabilityList.li2')}</li>
            <li>{t('legalApplicabilityList.li3')}</li>
          </ol>
        </div>
      </div>
    </div>
  );
};
